import 'package:flutter/material.dart';
import 'package:flutter_base_study/dialog/dialogpage.dart';
import 'package:flutter_base_study/pageview/pageview_demo.dart';

import '../../routers/news_page.dart';
import '../../routers/search_page.dart';
import '../../routers/tiaozhuanchuanzhi_page.dart';

/**
 * 头条app顶部导航演示：BottomNavigationBar  + Tabbar
 */
class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 8, vsync: this);
    //监听tab改变事件
    _tabController.addListener(() {
      //默认触发多次
      // I/flutter ( 3388): 1
      // I/flutter ( 3388): 1
      // I/flutter ( 3388): 0
      // I/flutter ( 3388): 0
      // print(_tabController.index);

      //点击tab触发一次的条件
      // I/flutter ( 3673): 0
      // I/flutter ( 3673): 1
      // I/flutter ( 3673): 2
      if (_tabController.animation?.value == _tabController.index) {
        //%获取点击或滑动页面的索引值
        print(_tabController.index);
      }
    });
  }

  //组件销毁的时候触发
  @override
  void dispose() {
    super.dispose();
    //销毁_tabController
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //preferredSize组件 设置appBar的高度
      appBar: PreferredSize(
        //可以配置appBar的高度
        preferredSize: const Size.fromHeight(40),
        child: AppBar(
            //水波纹效果（背景）
            elevation: 0.5,
            //去掉标题
            // title: const Text('头条app顶部导航演示：BottomNavigationBar  + Tabbar'),
            backgroundColor: Colors.white,
            centerTitle: true,
            //调整tabbar高度
            title: SizedBox(
              height: 30,
              child: TabBar(
                labelStyle: TextStyle(fontSize: 14),
                //底部指示器的颜色
                indicatorColor: Colors.green,
                //lable选中的颜色
                labelColor: Colors.red,
                //lable未选中的颜色
                unselectedLabelColor: Colors.black,
                controller: _tabController,
                isScrollable: true,
                //%%%%%%%%%只能监听点击事件，不能监听滑动事件
                onTap: (index) {
                  print('TabBar onTap');
                },
                tabs: const [
                  Tab(child: Text('普通路由传值')),
                  Tab(child: Text('Dialog')),
                  Tab(child: Text('PageView')),
                  Tab(child: Text('热门')),
                  Tab(child: Text('关注')),
                  Tab(child: Text('热门')),
                  Tab(child: Text('关注')),
                  Tab(child: Text('热门')),
                ],
              ),
            )

            // bottom: TabBar(
            //   controller: _tabController,
            //   isScrollable: true,
            //   tabs: const [
            //     Tab(child: Text('关注')),
            //     Tab(child: Text('热门')),
            //   ],
            // ),
            ),
      ),
      body: TabBarView(
        controller: _tabController,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  //普通路由 跳转到 search
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (BuildContext context) {
                      return SearchPage();
                    }),
                  );
                },
                child: Text('普通路由传值Navigator.push'),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  //路由跳转
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (BuildContext context) {
                    return NewsPage();
                  }));
                },
                child: Text('跳转到表单'),
              ),
              SizedBox(height: 20),
              //普通跳转传值
              ElevatedButton(
                onPressed: () {
                  //路由跳转
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (BuildContext context) {
                    return ChuanzhiDemo(
                      title: "我是标题1111111111111111111111111",
                      aid: 99999,
                    );
                  }));
                },
                child: Text('跳转传值'),
              ),

              SizedBox(height: 20),
              //命名路由跳转
              ElevatedButton(
                onPressed: () {
                  //命名路由跳转
                  Navigator.pushNamed(context, "/news_page");
                  // Navigator.of(context).push(
                  //   MaterialPageRoute(builder: (BuildContext context) {
                  // return NewsPage();
                  // }));
                },
                child: Text('命名路由跳转'),
              ),
              SizedBox(height: 20),
              //命名路由传值
              ElevatedButton(
                onPressed: () {
                  //命名路由跳转传值
                  Navigator.pushNamed(context, "/form_page",
                      arguments: {"data": "我是命名路由传值", "aid": 100});
                  // Navigator.of(context).push(
                  //   MaterialPageRoute(builder: (BuildContext context) {
                  // return NewsPage();
                  // }));
                },
                child: Text('命名路由跳转传值'),
              ),
              SizedBox(height: 20),
              //命名路由传值
              ElevatedButton(
                onPressed: () {
                  //命名路由跳转传值
                  Navigator.pushNamed(context, "/shop",
                      arguments: {"data": "我是命名路由传值shop", "aid": 200});
                },
                child: Text('命名路由跳转传值'),
              ),
            ],
          ),
          DialogPage(),
          PageviewDemo(),
          ListTile(title: Text('2')),
          ListTile(title: Text('3')),
          ListTile(title: Text('4')),
          ListTile(title: Text('5')),
          ListTile(title: Text('6')),
        ],
      ),
    );
  }
}
